<script setup>
</script>
<template>
  <div class="container">
    <div class="body">
      <!-- 底部按钮fixed pb-[66px] -->
      <div class="body_content">
        <div>
          <div class="text-[#FFFFFF] font-pingfang text-[24px]">认购类型</div>
          <div
            class="font-700 text-[#000] h-86 rounded-[16px] px-16 py-12 font-roboto flex items-center justify-between bg-[#FFFFFF1A] mt-14px">
            <div class="flex items-center">
              <img src="/src/assets/icon/public/logo_full.png" class="w-32 h-32" />
              <div class="font-700 text-[#fff] text-[24px]  font-HarmonyOS ml-10px">X</div>
            </div>
            <div class="">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 22 12" fill="none">
                <path
                  d="M2.85395 0.785834L11.0482 8.26756L19.3501 0.687541L19.3508 0.68892C19.6319 0.440688 20.0145 0.287952 20.436 0.287952C21.2998 0.287952 22 0.927339 22 1.71598C22 2.10086 21.8328 2.45018 21.5609 2.70681L21.5616 2.70749L12.1777 11.2756L12.1769 11.2749C11.8928 11.544 11.4942 11.7121 11.052 11.7121C11.0505 11.7121 11.0497 11.7121 11.0482 11.7121C11.0466 11.7121 11.0459 11.7121 11.0451 11.7121C10.603 11.7121 10.2036 11.544 9.91945 11.2749L9.9187 11.2756L0.534648 2.70755L0.538479 2.70403C0.269671 2.44741 0.103942 2.09952 0.103942 1.716C0.103942 0.927359 0.804223 0.287972 1.66796 0.287972C2.14218 0.287992 2.56678 0.481121 2.85395 0.785834Z"
                  fill="white" />
              </svg>
            </div>
          </div>
        </div>
        <div class="mt-28px">
          <div class="text-[#FFFFFF] font-pingfang text-[24px]">数量</div>
          <div
            class="font-700 text-[#000] h-86 rounded-[16px] px-16 py-12 font-roboto flex items-center justify-between bg-[#FFFFFF1A] mt-14px">
            <input type="text" v-model="amount" @input="handleAmountInput" placeholder="请输入认购数量"
              class="w-100% h-100% outline-none border-none font-pingfang font-400 text-[24px] text-[#7A7777] bg-[#000]/0" />
          </div>
        </div>
        <div class="flex items-center justify-between text-[#7A7777] text-[20px] font-pingfang mt-24px">
          <div>汇率:1X=7.2875USDT</div>
          <div>可用资产：0X</div>
        </div>
        <div class="flex items-center justify-between gap-20px mt-30px">
          <div class="w-50% font-roboto py-18 px-28 rounded-[16px] bg-[#FFFFFF1A]">
            <div class="mb-6">

            </div>
            <div class="text-[#FFFFFF] text-[32px] font-700 mb-6 font-HarmonyOS">
              100000
            </div>
            <div class="text-[#FFFFFF]/60 text-[20px] font-400 font-HarmonyOS">预计实际认购</div>
          </div>
          <div class="w-50% font-roboto py-18 px-28 rounded-[12px] bg-[#FFFFFF1A]">
            <div class="mb-6">

            </div>
            <div class="text-[#FFFFFF] text-[32px] font-700 mb-6 font-HarmonyOS">100000</div>
            <div class="text-[#FFFFFF]/60 text-[20px] font-400 font-HarmonyOS">预计获得算力</div>
          </div>
        </div>
        <div class="p-20 rounded-[10px] bg-[#FFFFFF1A] mt-24px">
          <div class="text-20px text-[#FFFFFF]/60 font-HarmonyOS font-400 line-height-32px">认购时间:2025-09-07
            00:00:00~2025-10-0600:00:00</div>
          <p class="text-20px text-[#FFFFFF]/60 font-HarmonyOS font-400 line-height-32px mt-10px">认购规则:</p>
          <div class="text-20px text-[#FFFFFF]/60 font-HarmonyOS font-400 line-height-32px">
            <p>1、订阅后，您将获得相当于您订阅金额的计算能力和积分。</p>
            <p>2、认购的X将安全地持有在持牌经纪账户中。要激活您的持股，您必须通过X.com 交易所完成经纪账户KYC。</p>
            <p>3、认购股份总数有限，将按先到先得的原则分配。</p>
            <p>4、2025年09月15日以前，认购价0.65u/股:9月16日~9月25日之间，认购价0.715u/股:9月26日~10月5日，认购价0.79u/股</p>
            <p>5、您订阅的X可能会被质押12个月。质押期结束后，这些X将在经纪账户内自由交易。</p>
          </div>
        </div>
        <div
          class=" h-90px rounded-[14px] bg-[#F76938] text-[#fff] text-[32px] text-center line-height-90px font-HarmonyOS font-700 van-haptics-feedback mt-190px"
          @click="handleClick">
          认 购</div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;

  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
  .body {
    width: 100%;

    &_top {
      width: 100%;
      height: 170px;
      background: linear-gradient(192deg, #191D1C 30.36%, #237D4E 90.99%);
    }

    // &_content {}

    &_footer {
      padding-left: 20px;
      padding-right: 16px;
      padding-top: 18px;
      padding-bottom: 30px;
    }
  }
}

.footerBtn {
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background-color: #fff;
  padding: 6px 16px;
}
</style>
